<template>
  <!-- 头部展示 -->
  <div class="article-management">
    <div class="info-content">
      <!-- 头部展示 -->
      <div class="info-top-title">
        <div>
          <span class="myInfo">发布文章</span
          ><span class="english"> Article management</span>
          <span class="asd"></span>
        </div>
      </div>
      <!-- 我的信息展示 -->
      <div class="show-user-info">
        <!-- 无信息时显示 -->
        <div style="display: none">
          <el-empty description="您暂未发布文章"></el-empty>
        </div>
        <!-- 展示用户写的博文 -->
        <div class="show-user-article">
           <!-- 显示没有时间数据的时候显示 -->
          <div style="width:100%" v-show="article.length ==0">
            <el-empty :image-size="250" description="您暂未发布文章"></el-empty>
          </div>
         
             <div
             v-show="article.length != 0"
            class="showuserarticle animate__animated animate__bounce"
            v-for="(item, index) in article"
            :key="index"
          >
            <ArticleContent :article="item"> </ArticleContent>
            <div class="gongju">
              <div style="margin-top: 41px">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  @click="updateArticle(item)"
                ></el-button>
              </div>

              <div style="margin-top: 20px">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  @click="deleteArticle(item.artId)"
                ></el-button>
              </div>
            </div>
         
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ArticleContent from "@/components/article/articleContent.vue";
import axios from "axios";
export default {
  name: "ArticleManagement",
  data() {
    return {
      articleData: {},
      article: [],
      userId: this.$store.state.user,
    };
  },
  components: {
    ArticleContent,
  },
  mounted() {
    //获取用户文章数据
    this.selectByUserArticle();
  },
  methods: {
    selectByUserArticle() {
      //拿到文章的数据
      const that = this;
      if (this.userId != 0 || this.userId != null) {
        axios({
          method: "post",
          url: "/aabbcc/article/selectByUserIdArticle",
          params: {
            userId: that.userId,
          },
        })
          .then(function (response) {
            if (response.data.code == 200) {
              that.article = response.data.obj;
            } else {
              that.open4(response.data.massage);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    updateArticle(item) {
      this.$router.push({
        name: "UpdateAnArticle",
        params: {
          articleData: item,
        },
      });
    },
    deleteArticle(item) {
      const that = this;
      if (this.userId != 0 || this.userId != null) {
        axios({
          method: "post",
          url: "/aabbcc/article/deleteArticle",
          params: {
            artId: item,
            userId: that.userId,
          },
        }).then(function (res) {
          if (res.data.code == 200) {
            that.open2(res.data.massage);
          } else {
            that.open4(res.data.massage);
          }
        });
      }
    },
    open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
.article-management {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
/*头部 */
.info-top-title {
  width: 100%;
  height: 30px;
}
.info-top-title .myInfo {
  color: #333;
  font-size: 25px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.info-top-title > div {
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.info-top-title > div:hover .asd {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}
.info-top-title .asd {
  width: 100%;
  border: 1px solid #2882c5;
  /* height: 1px; */
  /* background: red; */
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
/* 我的信息展示 */
.show-user-info {
  width: 100%;
  margin-top: 30px;
}
.show-user-article {
  width: 100%;
}
.show-user-article > .showuserarticle {
  width: 60%;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  position: relative;
}
.gongju {
  height: 170px;
  margin-top: 23px;
  position: absolute;
  right: -100px;
}
</style>